import React, { useEffect, useState } from 'react'
import './index.css'
import { Swiper, Image, Tabs } from 'react-vant';
import {useNavigate} from 'react-router-dom'
import axios from 'axios';
const images = [
  'https://img.yzcdn.cn/vant/apple-1.jpg',
  'https://img.yzcdn.cn/vant/apple-2.jpg',
  'https://img.yzcdn.cn/vant/apple-3.jpg',
  'https://img.yzcdn.cn/vant/apple-4.jpg',
  'https://img.yzcdn.cn/vant/apple-5.jpg',
  'https://img.yzcdn.cn/vant/apple-6.jpg',
  'https://img.yzcdn.cn/vant/apple-7.jpg',
  'https://img.yzcdn.cn/vant/apple-8.jpg',
]
interface dataType {
  title: string,
  id: string,
  children: childrenType[]
}
interface childrenType {
  url: string,
  title: string,
  id: string,
  sum:number
}
const Home: React.FC = () => {
  const navigate=useNavigate()
  const [data, getData] = useState<dataType[]>([])
  const [name, getName] = useState<number>(0)
  const getAxiosData = async () => {
    const resp = await axios.get('/api/list')
    getData(resp.data.data)
  }
  const textClick=(id:string)=>{
    navigate(`/text${id}`)
  }
  useEffect(() => {
    getAxiosData()
  }, [])
  return (
    <div className='home'>
      <div className="home-nav">
        <Swiper>
          {images.map((image) => (
            <Swiper.Item key={image}>
              <Image lazyload src={image} height={300} />
            </Swiper.Item>
          ))}
        </Swiper>
      </div>
      <div className="home-main">
        <Tabs defaultActive={name} onClickTab={(name)=>getName(name.name)}>
          {data.map((item,i) => (
            <Tabs.TabPane key={i} title={item.title}>
              {
                item.children.map(v => {
                  return <div key={v.id} className="home-main-item" onClick={()=>textClick(v.id)}>
                    <div>
                      <Image lazyload src={v.url} height={100} width={100} />
                    </div>
                    <h3>{v.title}</h3>
                  </div>
                })
              }
            </Tabs.TabPane>
          ))}
        </Tabs>
      </div>
    </div>
  )
}

export default Home